import React, {Component} from 'react';
import {Col, Row, Spin} from "antd";
import Service from "./Service";
import Lng from "../common/lng";
import './dish.css';

class DishDetail extends Component {

    state = {
        dish: {},
        loading: true
    }

    componentDidMount() {
        const self = this;
        Service.detail(self.props.id, (data) => {
            self.setState({
                dish: data.data,
                loading: false
            });
        })
    }

    render() {
        const {dish} = this.state;
        return (
            <Spin spinning={this.state.loading}>
                <div className={"dish-detail"}>
                    <Row>
                        <Col span={6}>
                            <label>{Lng.get("dish.code")}：</label>
                        </Col>
                        <Col span={6}>
                            <label>{dish.code}</label>
                        </Col>
                        <Col span={6}>
                            <label>{Lng.get("dish.name")}：</label>
                        </Col>
                        <Col span={6}>
                            <label>{dish.name}</label>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={6}>
                            <label>{Lng.get("dish.dishTypeName")}：</label>
                        </Col>
                        <Col span={6}>
                            <label>{dish.dishTypeName}</label>
                        </Col>
                        <Col span={6}>
                            <label>{Lng.get("dish.device")}：</label>
                        </Col>
                        <Col span={6}>
                            <label>{dish.deviceTypeName}</label>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={6}>
                            <label>{Lng.get("dish.merge")}：</label>
                        </Col>
                        <Col span={6}>
                            <label>{dish.merge ? Lng.get("common.yes") : Lng.get("common.no")}</label>
                        </Col>
                        <Col span={6}>
                            <label>{Lng.get("store.name")}：</label>
                        </Col>
                        <Col span={6}>
                            <label>{dish.storeName}</label>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={6}>
                            <label>{Lng.get("dish.firstSpell")}：</label>
                        </Col>
                        <Col span={6}>
                            <label>{dish.letterFirPy}</label>
                        </Col>
                        <Col span={6}>
                            <label>{Lng.get("dish.deviceDisplayName")}：</label>
                        </Col>
                        <Col span={6}>
                            <label>{dish.deviceDisplayName}</label>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={6}>
                            <label>{Lng.get("dish.expTime")}：</label>
                        </Col>
                        <Col span={6}>
                            <label>{(dish.expTime || "-") + " " + Lng.get("common." + dish.expTimeUnit)}</label>
                        </Col>
                        <Col span={6}>
                            <label>{Lng.get("dish.processTime")}：</label>
                        </Col>
                        <Col span={6}>
                            <label>{(dish.processTime || "-") + " " + Lng.get("common." + dish.processTimeUnit)}</label>
                        </Col>
                    </Row>
                </div>
            </Spin>
        )
    }
}

export default DishDetail;